<!-- navbar header -->
<div class="navbar-header {{app.settings.navbarHeaderColor}}">
    <button class="pull-right visible-xs dk" ui-toggle-class="show" data-target=".navbar-collapse">
        <i class="glyphicon glyphicon-cog"></i>
    </button>
    <button class="pull-right visible-xs" ui-toggle-class="off-screen" data-target=".app-aside" ui-scroll="app">
        <i class="glyphicon glyphicon-align-justify"></i>
    </button>
    <!-- brand -->
    <a href="#/" class="navbar-brand text-lt">
        <i class="fa fa-play-circle"></i>
        <img src="img/logo.png" alt="." class="hide">
        <span class="hidden-folded m-l-xs">MUSIC</span>
    </a>
    <!-- / brand -->
</div>
<!-- / navbar header -->
<!-- navbar collapse -->
<div class="collapse pos-rlt navbar-collapse {{app.settings.navbarCollapseColor}}">
    <!-- search form -->
    <form class="navbar-form navbar-form-sm navbar-left no-padder" role="search" ng-controller="TypeaheadDemoCtrl">
        <div class="form-group">
            <div class="input-group w-lg w-auto-xs">
                <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control input-sm bg-light no-border padder" placeholder="Search songs and artists...">
                <span class="input-group-btn">
                <button type="submit" class="btn btn-sm bg-light"><i class="fa fa-search"></i></button>
              </span>
            </div>
        </div>
    </form>
    <!-- / search form -->
    <!-- nabar right -->
    <ul class="nav navbar-nav navbar-right">
        <li class="hidden-xs">
            <a ui-fullscreen></a>
        </li>
        <li class="dropdown" dropdown>
            <a href class="dropdown-toggle" dropdown-toggle>
                <i class="icon-bell fa-fw"></i>
                <span class="visible-xs-inline">Notifications</span>
                <span class="badge badge-sm up bg-danger pull-right-xs">2</span>
            </a>
            <!-- dropdown -->
            <div class="dropdown-menu w-xl animated fadeInUp">
                <div class="panel bg-white">
                    <div class="panel-heading b-light bg-light">
                        <strong>You have <span>2</span> notifications</strong>
                    </div>
                    <div class="list-group">
                        <a href class="media list-group-item">
                            <span class="pull-left thumb-sm">
                      <img src="img/user.png" alt="..." class="img-circle">
                    </span>
                            <span class="media-body block m-b-none">
                      Use awesome animate.css<br>
                      <small class="text-muted">10 minutes ago</small>
                    </span>
                        </a>
                        <a href class="media list-group-item">
                            <span class="media-body block m-b-none">
                      1.0 initial released<br>
                      <small class="text-muted">1 hour ago</small>
                    </span>
                        </a>
                    </div>
                    <div class="panel-footer text-sm">
                        <a href class="pull-right"><i class="fa fa-cog"></i></a>
                        <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
                    </div>
                </div>
            </div>
            <!-- / dropdown -->
        </li>
        <li class="bg-light">
            <a href class="bg-info text-white" tooltip-placement="left" tooltip="Upload"><i class="fa fa-plus fa-fw"></i></a>
        </li>
    </ul>
    <!-- / navbar right -->
</div>
<!-- / navbar collapse -->
